import React, { useState } from "react";
import { MenuOutlined, BulbOutlined } from "@ant-design/icons";
import { Drawer, Menu } from "antd";
import { Link } from "react-router-dom";
import "./index.less";
import { Logo } from "@/data/logo";

interface HeaderProps {
  activeKey: string;
  onTabClick: (key: string) => void;
}

const Header: React.FC<HeaderProps> = ({ activeKey, onTabClick }) => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const handleMenuToggle = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  const handleDrawerClose = () => {
    setIsMobileMenuOpen(false);
  };

  const menuItems = [
    { key: "home", label: "首页", path: "/" },
    { key: "about", label: "简介", path: "/about" },
    { key: "projects", label: "项目", path: "/projects" },
    { key: "resume", label: "简历", path: "/resume" },
  ];

  return (
    <div className="header">
      <div className="header__logo">
        <img src={Logo} alt="Logo" />
      </div>

      <nav className="header__nav">
        {/* 桌面端菜单 */}
        <ul className="header__nav-list">
          {menuItems.map((item) => (
            <li
              key={item.key}
              className={`header__nav-item ${
                activeKey === item.key ? "header__nav-item--active" : ""
              }`}
              onClick={() => onTabClick(item.key)}
            >
              {item.label}
            </li>
          ))}
        </ul>

        {/* 移动端菜单图标 */}
        <MenuOutlined
          className="header__icon header__icon--menu"
          onClick={handleMenuToggle}
        />
      </nav>

      {/* 移动端抽屉菜单 */}
      <Drawer
        title="导航菜单"
        placement="top"
        closable={false}
        onClose={handleDrawerClose}
        open={isMobileMenuOpen}
        key="top"
        extra={
          <div onClick={handleDrawerClose}>
            <BulbOutlined className="m-header-nav__close-icon" />
          </div>
        }
      >
        <Menu
          onClick={(e) => {
            onTabClick(e.key);
            handleDrawerClose();
          }}
          selectedKeys={[activeKey]}
          items={menuItems.map((item) => ({
            key: item.key,
            label: (
              <div key={item.path} className="m-header-nav__link">
                {item.label}
              </div>
            ),
          }))}
        />
      </Drawer>
    </div>
  );
};

export default Header;
